import React, { useState,useEffect } from 'react';
import { Table,Button,Pagination,Space } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { PaginationProps } from 'antd';
import type { TableRowSelection } from 'antd/es/table/interface';
import { categoryListWithGoods } from "@/request/api"
interface DataType {
    key: React.ReactNode;
    name: string;
    children?: DataType[];
}

const columns: ColumnsType<DataType> = [
    {
        title: '分类/名称',
        dataIndex: 'title',
        key: 'title',
    },
    // {
    //     title: '图片',
    //     key: 'smallImage',
    //     render: () => <Image
    //         width={100}
    //         src="{'http://101.34.50.113:9999/'+}"
    //     />
    // },
    {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
    },
    {
        title: 'Action',
        key: 'operation',
        fixed: 'right',
        width: 100,
        render: () => <Button type="link">查看</Button>,
    },
];

const table: React.CSSProperties = {
    margin:'0 10px',
    minHeight:'calc(100vh - 190px)',
    maxHeight:'calc(100vh - 190px)',
    background: '#fff',
    borderRadius:'5px'
}
const pagination: React.CSSProperties = {
    margin:'10px 10px 0',
    background: '#fff',
    borderRadius:'5px',
    padding:'0 20px',
    display:'flex',
    height:'50px',
    justifyContent:'right',
    alignItems:'center'
}
  // rowSelection objects indicates the need for row selection
const rowSelection: TableRowSelection<DataType> = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
    },
};
const onChange: PaginationProps['onChange'] = (pageNumber) => {
    console.log('Page: ', pageNumber);
};
const computedTableHightFn = () => {
    let innerHeight = window.innerHeight || 500
    return innerHeight - 250
}
const Goods: React.FC = () => {
    const [checkStrictly, setCheckStrictly] = useState(false);
    const computedTableHight = computedTableHightFn()
    const [total,setTotal] = useState(0); // 定义用户输入用户名这个变量
    const [dataList,setDataList] = useState([]); // 定义用户输入用户名这个变量
    const getDataList = async() => {
        let res = await categoryListWithGoods()
        if(res.status == 10){
            let data = res.data.map(r=>{
                if(r.goodsList.length){
                    r.children = r.goodsList
                }
                return r
            })
            setDataList(data);
            setTotal(res.data.length)
        }

    }
    useEffect(()=>{  
        getDataList();
    },[]);
    return (
        <>
            <Table
                style={table}
                scroll={{ y: computedTableHight }}
                columns={columns}
                pagination={false}
                rowSelection={{ ...rowSelection, checkStrictly }}
                dataSource={dataList}
            />
            <Pagination style={pagination} showQuickJumper defaultCurrent={2} total={total} onChange={onChange} />
        </>
    );
};
export default Goods;